<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding:0
        }
      img{
          width: 300px;height: 300px;
          position: absolute;
          /* margin: 100px;       */   /* 从margin原点开始移动,此时pageX-100 */
      }
    </style>
</head>
<body>
    <img src="images/02.jpg" alt="">
    <script>
        /* 获取鼠标距离x轴的距离
           event.pageX  
           event.clientX */
           var img=document.getElementsByTagName("img")[0]
           document.onmousemove=function(event){
           var pageX=event.clientX;
           var pageY=event.clientY;
           img.style.cssText=`left:${pageX}px;top:${pageY}px`
       }
    </script> 
</body>
</html>